<!--
* @description 弹出滚动单选
* @author zywu
* @date 2021/03/16 20:49:19
!-->
<template>
  <span class="pop-picker">
    <pop-button :is-active="false" :is-open="active" :text="text" @click.native="handleClick"></pop-button>
    <van-popup v-model="active" round position="bottom">
      <van-picker
        ref="picker"
        show-toolbar
        value-key="text"
        confirm-button-text="清空"
        :columns="columns"
        @confirm="onConfirm"
      />
    </van-popup>
  </span>
</template>

<script>
import PopButton from '@/components/PopButton'

export default {
  props: {
    columns: Array,
    text: String,
  },
  data() {
    return {
      active: false,
    }
  },

  components: { PopButton },

  computed: {},

  created() {},

  mounted() {},

  methods: {
    onConfirm() {
      this.active = false
      this.$refs.picker.setIndexes([0])
    },
    handleClick() {
      this.active = !this.active
    },
  },
}
</script>
<style lang='scss'>
.pop-picker {
  .van-picker__toolbar {
    justify-content: flex-end;
  }
  .van-picker__cancel {
    display: none;
  }
}
</style>